<template>
    <div>

        <div class="detail-load" v-show="!bookdetail">
            <div class="load-content">
                <van-loading type="spinner" color="#1989fa" vertical size="50px"/>
            </div>
            
        </div>




        <div v-if="bookdetail">
        <!-- 头部 -->
        <div class="category-header">
            <span @click="goBack"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></span>
            <div class="icont-header">{{bookdetail.title}}</div>
        </div>

        <!-- 书籍详情 -->
        <div class="book-detail" >
            <img :src="bookdetail.link[1].href" alt="" class="book-cover">
            <div class="book-cell">
                <h1 class="book-title">{{bookdetail.title}}</h1>
                <div class="book-rand-a">{{bookdetail.author.name}}</div>
                <p class="book-meta">{{bookdetail["pris:book"].category}}</p>
                <p class="book-meta">{{bookdetail["pris:book"].words/10000}}万字<span class="char-pipe">|</span>连载中</p>
                <p class="book-meta">
                    <span class="tag-small-group origin-left"></span>
                </p>
            </div>
        </div>

        <!-- 添加书架 -->
        <div class="btn-change">
            <div class="btn-change-first">
                <div class="btn-button" @click="read">免费试读</div>
                <div class="btn-button" v-show="add" @click="getBookShelf">+书架</div>
                <div class="btn-button" v-show="!add" >已在书架</div>
            </div>
            <div class="btn-change-last">
                <div class="btn-down">下载APP,全场免费试读</div>
            </div>
        </div>

        <!-- 书籍介绍 -->
        <div class="book-detail-content">
        {{bookdetail.summary}}
        </div>

        <!-- 目录 -->
        <router-link tag="div" class="catalogue" to="./booklist">
            <div class="book-meta-left">目录</div>
            <div class="book-meta-right">21小时前.连载至{{lastcontent}}<span><svg t="1640308770432" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="82432" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="82433"></path></svg></span></div>
        </router-link>

        <!-- 月票 -->
        <div class="mount-track">
            <div class="track-content" @click="btnMonth">
                <span><svg t="1640310221270" class="icon" viewBox="0 0 1047 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="93617" width="28" height="28"><path d="M751.107187 38.668025l198.816526 437.460102a72.033503 72.033503 0 0 1-30.931523 88.375778l-622.976797 318.109338a63.83339 63.83339 0 0 1-88.419241-30.931523v-4.346349L8.837578 409.846293a72.033503 72.033503 0 0 1 30.931522-88.375778l622.976797-313.690549a63.83339 63.83339 0 0 1 88.36129 30.888059z" fill="#FECEBE" p-id="93618"></path><path d="M83.942501 582.164573l-44.187889-194.397737a67.84652 67.84652 0 0 1 53.025467-83.942501l773.201132-181.097906a67.84652 67.84652 0 0 1 83.942502 53.025467c22.093945 97.198868 39.7691 167.899491 48.606677 212.072892" fill="#FB8383" p-id="93619"></path><path d="M980.855235 317.066214a67.947934 67.947934 0 0 1 66.267346 66.267346v185.574646a101.617657 101.617657 0 1 0 0 203.235314v185.632598a67.947934 67.947934 0 0 1-66.267346 66.281833H66.267346A67.947934 67.947934 0 0 1 0 957.776118V772.14352a104.312394 104.312394 0 0 0 88.375778-101.617657A100.980192 100.980192 0 0 0 0 568.908206V383.33356a67.947934 67.947934 0 0 1 66.267346-66.267346z" fill="#FF6050" p-id="93620"></path><path d="M653.908319 701.457385h-92.722128v39.769101h92.722128v53.010979h-92.722128v70.744086h-66.267345v-70.686135h-97.271308v-53.010979h97.198868v-39.7691h-97.198868v-48.606678h70.700623l-70.700623-141.430221h66.267346l66.267346 123.711602 61.863044-123.711602h70.686135l-75.104923 141.386757h66.267345z" fill="#FECEBE" p-id="93621"></path></svg></span>
                <p>月票</p>
                <span class="txt">{{bookdetail["pris:book"].totalArticleCount[0]}}票</span>
            </div>
            <div class="track-content" @click="btnRecommend">
                <span><svg t="1640310267329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="93762" width="28" height="28"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="93763"></path><path d="M136.533333 307.2a34.133333 34.133333 0 0 1 34.133334-34.133333h682.666666a34.133333 34.133333 0 0 1 34.133334 34.133333v437.3504a68.266667 68.266667 0 0 1-35.566934 59.938133l-274.5344 149.7088a136.533333 136.533333 0 0 1-130.730666 0L172.100267 804.522667A68.266667 68.266667 0 0 1 136.533333 744.5504V307.2z" fill="#FF7744" p-id="93764"></path><path d="M68.266667 136.533333a68.266667 68.266667 0 0 1 68.266666-68.266666h750.933334a68.266667 68.266667 0 0 1 68.266666 68.266666v117.4528a34.133333 34.133333 0 0 1-16.247466 29.0816l-373.828267 230.058667a102.4 102.4 0 0 1-107.3152 0L84.514133 283.0336A34.133333 34.133333 0 0 1 68.266667 253.952V136.533333z" fill="#FFAA44" p-id="93765"></path><path d="M496.605867 339.490133a17.066667 17.066667 0 0 1 30.788266 0L576.853333 443.050667a17.066667 17.066667 0 0 0 13.175467 9.557333l113.800533 15.018667a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018666a17.066667 17.066667 0 0 0-5.051733 15.496534l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090666l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090666l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496534l-83.217066-79.018666a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018667a17.066667 17.066667 0 0 0 13.175466-9.557333l49.425067-103.560534z" fill="#FFFFFF" p-id="93766"></path></svg></span>
                <p>推荐票</p>
                <span class="txt">{{bookdetail["pris:book"].wprice}}票</span>
            </div>
            <div class="track-content" @click="btnGift">
                <span><svg t="1640310301953" class="icon" viewBox="0 0 1132 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="93911" width="28" height="28"><path d="M17.885047 226.624992h1096.949544c9.836776 0 17.885047 8.048271 17.885047 17.885047v213.428226c0 9.836776-8.048271 17.885047-17.885047 17.885047H17.885047c-9.836776 0-17.885047-8.048271-17.885047-17.885047V244.510039c0-9.836776 8.048271-17.885047 17.885047-17.885047z" fill="#FF505D" p-id="93912"></path><path d="M142.335165 475.823312h848.049308c6.557851 0 11.923365 5.365514 11.923365 11.923365V1012.076635c0 6.557851-5.365514 11.923365-11.923365 11.923365h-848.049308c-6.557851 0-11.923365-5.365514-11.923365-11.923365V487.746677c0-6.557851 5.365514-11.923365 11.923365-11.923365z" fill="#FF6174" p-id="93913"></path><path d="M258.438928 160.59936S128.474254 135.560294 102.540936 126.617771l45.904953 66.025631L65.578505 225.581697s193.903717 35.919136 402.860682 4.918388L367.835798 184.893215l-109.39687-24.293855zM351.888298 3.359989c-66.025632-11.774323-97.473506 11.178154-97.473506 11.178155l-18.034089 114.017174s46.650164-31.745958 101.944768-18.034089c71.987314 18.034089 162.008717 119.978856 162.008717 119.978856v-77.948996S441.313533 19.307489 351.888298 3.359989zM989.639263 192.643402l46.053996-66.025631c-25.933318 8.942523-155.897992 33.981589-155.897993 33.981589L770.398396 184.893215l-100.603389 45.755912c208.956965 31.000748 402.860682-5.06743 402.860682-5.06743L989.639263 192.643402zM901.704449 128.555318L883.819402 14.687186s-31.447874-22.952477-97.473506-11.178155C696.920662 19.456531 637.900007 152.700131 637.900007 152.700131v77.948996s89.872361-101.944767 161.859674-119.978856c55.145561-13.860911 101.944767 17.885047 101.944768 17.885047z" fill="#FFCA3E" p-id="93914"></path><path d="M491.83879 141.521977h149.042058V1024H491.83879z" fill="#FFCA3E" p-id="93915"></path><path d="M491.83879 479.99649h149.042058v544.00351H491.83879z" fill="#FFB82C" p-id="93916"></path><path d="M387.211266 127.959149c-64.982337-37.558599-142.186123-24.890024-150.681521 0.745211-9.38965 28.168949 36.664346 58.126402 103.286146 93.002244 43.818365 22.952477 160.667338 8.942523 160.667339 8.942523s-48.289627-65.280421-113.271964-102.689978zM901.704449 128.555318c-8.495397-25.635234-85.699183-38.303809-150.681521-0.745211s-113.271964 102.689978-113.271963 102.689978 116.998015 14.009953 160.667338-8.942523c66.6218-34.726799 112.675796-64.833295 103.286146-93.002244z" fill="#FFB82C" p-id="93917"></path></svg></span>
                <p>礼物</p>
                <span class="txt">本周0人次</span>
            </div>
            <div class="track-content" @click="btnFans">
                <span><svg t="1640310330259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="94062" width="28" height="28"><path d="M455.74 946.92H287.52c-159.52 0-285.38 0-285.38-85.45v-16.99c0-160.09 128.02-290.37 285.38-290.37h168.12c157.36 0 285.38 130.23 285.38 290.32v17.04c0 85.45-132.19 85.45-285.28 85.45zM363.24 536.93c-124.93 0-226.49-103.46-226.49-230.66-0.05-127.24 101.51-230.55 226.44-230.55 124.98 0 226.54 103.46 226.54 230.56S488.17 536.93 363.24 536.93zM616.75 298.34c0 58.32-16.11 111.6-51.21 152.36 27.79 63.67 85.24 108.25 158.03 108.25 98.57 0 178.72-81.59 178.72-181.96 0-100.38-80.2-181.81-178.82-181.81-42.9 0.03-84.44 15.08-117.41 42.52 5.19 19.41 10.69 39.75 10.69 60.64z" fill="#15689C" p-id="94063"></path><path d="M796.4 572.5H663.8c-17.45 0-34.33 2.06-50.65 5.82 95.48 50.65 155.07 150.01 154.78 258.09v17.04c0 10.97-2.11 20.49-6.28 28.83h34.75c120.76 0 225.05 0 225.05-67.43v-13.43c0.15-126.13-100.94-228.92-225.05-228.92z m0 0" fill="#15689C" p-id="94064"></path></svg></span>
                <p>迷妹</p>
                <span class="txt">1685迷妹</span>
            </div>
        </div>

        <!-- 书评 -->
        <div class="book-comment">
            <div class="left">书评区</div>
            <div class="right" @click="btnShow">发表书评</div>
        </div>

        <!-- 书评内容 -->
        <!-- <div class="book-comment-content" v-if="bookcomment">
            <ul>
                <li v-for="(item,index) in bookcomment" :key="index" v-show="item.avatar">
                    <div class="author">
                        <img :src="item.avatar" alt="">
                        <div class="author-txt">
                            <span>{{item.nickName}}</span>
                            <p>等级:lv{{item.grade}}</p>
                        </div>
                    </div>
                    <div class="li-content">{{item.comment}}</div>
                    <div class="li-foot">
                        <span @click="btnReply(item.commentId)"><svg t="1640400807681" class="icon" viewBox="0 0 1171 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="98087" width="14" height="10"><path d="M1170.093202 780.429946C1170.093202 834.158592 1126.272683 877.714286 1072.971191 877.714286L763.496643 877.714286C709.85767 877.714286 626.550638 895.060748 576.691736 916.778179L414.718147 987.330267C365.187657 1008.90468 325.035252 982.589489 325.035252 928.881469L325.035252 926.397635C325.035252 899.510565 303.204059 877.714286 276.374187 877.714286L97.521274 877.714286C43.661751 877.714286 0 834.188288 0 780.429946L0 97.28434C0 43.555694 43.733528 0 97.748943 0L1072.344259 0C1126.329539 0 1170.093202 43.525998 1170.093202 97.28434L1170.093202 780.429946ZM368.391314 780.190476C395.180422 780.190476 416.897268 801.834179 416.897268 828.952381 416.897268 855.88285 436.699575 869.059682 461.516995 858.213278L550.564376 819.295232C599.979739 797.698243 683.911997 780.190476 737.150342 780.190476L1023.964209 780.190476C1050.914426 780.190476 1072.761905 758.250106 1072.761905 731.094796L1072.761905 146.61949C1072.761905 119.504701 1050.560317 97.52381 1024.399701 97.52381L145.886013 97.52381C119.17629 97.52381 97.52381 119.46418 97.52381 146.61949L97.52381 731.094796C97.52381 758.209585 119.475639 780.190476 146.029763 780.190476L368.391314 780.190476ZM292.571429 536.380952C292.571429 509.450484 314.795203 487.619048 341.453922 487.619048L828.831793 487.619048C855.828821 487.619048 877.714286 509.26275 877.714286 536.380952 877.714286 563.311421 855.490511 585.142857 828.831793 585.142857L341.453922 585.142857C314.456893 585.142857 292.571429 563.499154 292.571429 536.380952ZM292.571429 341.333333C292.571429 314.402865 314.795203 292.571429 341.453922 292.571429L828.831793 292.571429C855.828821 292.571429 877.714286 314.215131 877.714286 341.333333 877.714286 368.263802 855.490511 390.095238 828.831793 390.095238L341.453922 390.095238C314.456893 390.095238 292.571429 368.451535 292.571429 341.333333Z" p-id="98088"></path></svg>{{item.replyCount}}</span>
                        <span @click="btnLikes(index)" v-show="item.actionId"><svg t="1640400703507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="94497" width="16" height="12"><path d="M939.072 434.496C919.744 403.392 886.272 384 851.904 382.976L638.848 381.952c14.208-41.024 21.376-83.776 21.376-127.04 0-21.504-1.856-43.52-5.952-67.264l-3.968-17.152C638.976 121.344 595.84 86.912 545.28 86.912c-59.456 0-107.84 48.384-107.84 107.904 0 3.456 0.128 6.848 0.448 9.664C434.944 310.016 307.904 418.944 264.704 418.944c0 0 0 0-0.064 0L106.368 419.008c-20.672 0-37.504 16.896-37.504 37.568l-0.384 442.88c0 20.992 18.176 36.288 40.96 36.928l137.216-0.256 5.248 0.96 4.608-0.64 522.24 0.192c18.368-1.28 36.096-6.976 51.456-16.768 16.64-10.688 30.08-25.728 36.16-38.976l6.4-10.624c35.968-85.632 79.872-347.968 81.664-359.04l0.704-10.624C956.928 477.056 951.36 454.208 939.072 434.496zM132.864 483.328 218.24 483.2l0 389.312-85.696 0.256L132.864 483.328zM815.744 841.6l-4.032 6.4c-3.648 7.36-9.216 13.568-16 17.92-6.208 3.968-13.568 6.336-19.136 6.72L282.24 872.448 282.24 479.808C366.656 463.36 498.24 334.336 501.824 201.344L501.44 194.816c0-24.192 19.648-43.904 43.84-43.904 20.544 0 38.08 13.952 42.688 33.984l3.584 15.232c3.136 18.368 4.672 36.736 4.672 54.656 0 36.352-6.08 72.256-18.112 106.624L548.672 445.824l291.456 0.064 6.912 0.704c15.488 0.576 29.568 8.704 37.696 21.76 5.056 8.128 7.36 17.6 6.592 32.384C890.88 503.296 846.848 766.656 815.744 841.6z" p-id="94498"></path></svg>{{item.likes}}</span>
                        <span @click="btnCancel(index)" v-show="!item.actionId"><svg t="1640414114297" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="105075" width="16" height="12"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="105076" fill="#d81e06"></path></svg>{{item.likes}}</span>
                    </div>
                </li>
            </ul>
        </div> -->

        <!-- 书评回复列表 -->
        <van-popup v-model="showreply" round position="bottom" :style="{ height: '30%' }" >
            <div class="book-comment-reply">
                <ul>
                    <li v-for="(item,index) in replylist" :key="index" v-show="item.avatar">
                        <div class="author">
                            <img :src="item.avatar" alt="">
                            <div class="author-txt">
                                <span>{{item.nickName}}</span>
                                <p>等级:lv{{item.grade}}</p>
                            </div>
                        </div>
                        <div class="li-content">{{item.comment}}</div>
                        <div class="li-foot">
                            <span><svg t="1640400807681" class="icon" viewBox="0 0 1171 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="98087" width="14" height="10"><path d="M1170.093202 780.429946C1170.093202 834.158592 1126.272683 877.714286 1072.971191 877.714286L763.496643 877.714286C709.85767 877.714286 626.550638 895.060748 576.691736 916.778179L414.718147 987.330267C365.187657 1008.90468 325.035252 982.589489 325.035252 928.881469L325.035252 926.397635C325.035252 899.510565 303.204059 877.714286 276.374187 877.714286L97.521274 877.714286C43.661751 877.714286 0 834.188288 0 780.429946L0 97.28434C0 43.555694 43.733528 0 97.748943 0L1072.344259 0C1126.329539 0 1170.093202 43.525998 1170.093202 97.28434L1170.093202 780.429946ZM368.391314 780.190476C395.180422 780.190476 416.897268 801.834179 416.897268 828.952381 416.897268 855.88285 436.699575 869.059682 461.516995 858.213278L550.564376 819.295232C599.979739 797.698243 683.911997 780.190476 737.150342 780.190476L1023.964209 780.190476C1050.914426 780.190476 1072.761905 758.250106 1072.761905 731.094796L1072.761905 146.61949C1072.761905 119.504701 1050.560317 97.52381 1024.399701 97.52381L145.886013 97.52381C119.17629 97.52381 97.52381 119.46418 97.52381 146.61949L97.52381 731.094796C97.52381 758.209585 119.475639 780.190476 146.029763 780.190476L368.391314 780.190476ZM292.571429 536.380952C292.571429 509.450484 314.795203 487.619048 341.453922 487.619048L828.831793 487.619048C855.828821 487.619048 877.714286 509.26275 877.714286 536.380952 877.714286 563.311421 855.490511 585.142857 828.831793 585.142857L341.453922 585.142857C314.456893 585.142857 292.571429 563.499154 292.571429 536.380952ZM292.571429 341.333333C292.571429 314.402865 314.795203 292.571429 341.453922 292.571429L828.831793 292.571429C855.828821 292.571429 877.714286 314.215131 877.714286 341.333333 877.714286 368.263802 855.490511 390.095238 828.831793 390.095238L341.453922 390.095238C314.456893 390.095238 292.571429 368.451535 292.571429 341.333333Z" p-id="98088"></path></svg>{{item.replyCount}}</span>
                            <span @click="btnReplyLikes(index)" v-show="item.actionId"><svg t="1640400703507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="94497" width="16" height="12"><path d="M939.072 434.496C919.744 403.392 886.272 384 851.904 382.976L638.848 381.952c14.208-41.024 21.376-83.776 21.376-127.04 0-21.504-1.856-43.52-5.952-67.264l-3.968-17.152C638.976 121.344 595.84 86.912 545.28 86.912c-59.456 0-107.84 48.384-107.84 107.904 0 3.456 0.128 6.848 0.448 9.664C434.944 310.016 307.904 418.944 264.704 418.944c0 0 0 0-0.064 0L106.368 419.008c-20.672 0-37.504 16.896-37.504 37.568l-0.384 442.88c0 20.992 18.176 36.288 40.96 36.928l137.216-0.256 5.248 0.96 4.608-0.64 522.24 0.192c18.368-1.28 36.096-6.976 51.456-16.768 16.64-10.688 30.08-25.728 36.16-38.976l6.4-10.624c35.968-85.632 79.872-347.968 81.664-359.04l0.704-10.624C956.928 477.056 951.36 454.208 939.072 434.496zM132.864 483.328 218.24 483.2l0 389.312-85.696 0.256L132.864 483.328zM815.744 841.6l-4.032 6.4c-3.648 7.36-9.216 13.568-16 17.92-6.208 3.968-13.568 6.336-19.136 6.72L282.24 872.448 282.24 479.808C366.656 463.36 498.24 334.336 501.824 201.344L501.44 194.816c0-24.192 19.648-43.904 43.84-43.904 20.544 0 38.08 13.952 42.688 33.984l3.584 15.232c3.136 18.368 4.672 36.736 4.672 54.656 0 36.352-6.08 72.256-18.112 106.624L548.672 445.824l291.456 0.064 6.912 0.704c15.488 0.576 29.568 8.704 37.696 21.76 5.056 8.128 7.36 17.6 6.592 32.384C890.88 503.296 846.848 766.656 815.744 841.6z" p-id="94498"></path></svg>{{item.likes}}</span>
                            <span @click="btnReplyCancel(index)" v-show="!item.actionId"><svg t="1640414114297" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="105075" width="16" height="12"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="105076" fill="#d81e06"></path></svg>{{item.likes}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </van-popup>


        <!-- 发表书评 -->
        <van-popup v-model="showcomment" round position="bottom" :style="{ height: '40%' }" >
            <van-field
                v-model="commentword"
                center
                clearable
                label="评论"
                placeholder="请输入内容"
            >
                <template #button>
                        <van-button size="small" type="primary" @click="btnSend">发表</van-button>
                </template>
            </van-field>    

            <!-- 书籍评论 -->
            <div class="book-comment-content" v-if="bookcomment">
            <ul>
                <li v-for="(item,index) in bookcomment" :key="index" v-show="item.avatar">
                    <div class="author">
                        <img :src="item.avatar" alt="">
                        <div class="author-txt">
                            <span>{{item.nickName}}</span>
                            <p>等级:lv{{item.grade}}</p>
                        </div>
                    </div>
                    <div class="li-content">{{item.comment}}</div>
                    <div class="li-foot">
                        <span @click="btnReply(item.commentId)"><svg t="1640400807681" class="icon" viewBox="0 0 1171 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="98087" width="14" height="10"><path d="M1170.093202 780.429946C1170.093202 834.158592 1126.272683 877.714286 1072.971191 877.714286L763.496643 877.714286C709.85767 877.714286 626.550638 895.060748 576.691736 916.778179L414.718147 987.330267C365.187657 1008.90468 325.035252 982.589489 325.035252 928.881469L325.035252 926.397635C325.035252 899.510565 303.204059 877.714286 276.374187 877.714286L97.521274 877.714286C43.661751 877.714286 0 834.188288 0 780.429946L0 97.28434C0 43.555694 43.733528 0 97.748943 0L1072.344259 0C1126.329539 0 1170.093202 43.525998 1170.093202 97.28434L1170.093202 780.429946ZM368.391314 780.190476C395.180422 780.190476 416.897268 801.834179 416.897268 828.952381 416.897268 855.88285 436.699575 869.059682 461.516995 858.213278L550.564376 819.295232C599.979739 797.698243 683.911997 780.190476 737.150342 780.190476L1023.964209 780.190476C1050.914426 780.190476 1072.761905 758.250106 1072.761905 731.094796L1072.761905 146.61949C1072.761905 119.504701 1050.560317 97.52381 1024.399701 97.52381L145.886013 97.52381C119.17629 97.52381 97.52381 119.46418 97.52381 146.61949L97.52381 731.094796C97.52381 758.209585 119.475639 780.190476 146.029763 780.190476L368.391314 780.190476ZM292.571429 536.380952C292.571429 509.450484 314.795203 487.619048 341.453922 487.619048L828.831793 487.619048C855.828821 487.619048 877.714286 509.26275 877.714286 536.380952 877.714286 563.311421 855.490511 585.142857 828.831793 585.142857L341.453922 585.142857C314.456893 585.142857 292.571429 563.499154 292.571429 536.380952ZM292.571429 341.333333C292.571429 314.402865 314.795203 292.571429 341.453922 292.571429L828.831793 292.571429C855.828821 292.571429 877.714286 314.215131 877.714286 341.333333 877.714286 368.263802 855.490511 390.095238 828.831793 390.095238L341.453922 390.095238C314.456893 390.095238 292.571429 368.451535 292.571429 341.333333Z" p-id="98088"></path></svg>{{item.replyCount}}</span>
                        <span @click="btnLikes(index)" v-show="item.actionId"><svg t="1640400703507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="94497" width="16" height="12"><path d="M939.072 434.496C919.744 403.392 886.272 384 851.904 382.976L638.848 381.952c14.208-41.024 21.376-83.776 21.376-127.04 0-21.504-1.856-43.52-5.952-67.264l-3.968-17.152C638.976 121.344 595.84 86.912 545.28 86.912c-59.456 0-107.84 48.384-107.84 107.904 0 3.456 0.128 6.848 0.448 9.664C434.944 310.016 307.904 418.944 264.704 418.944c0 0 0 0-0.064 0L106.368 419.008c-20.672 0-37.504 16.896-37.504 37.568l-0.384 442.88c0 20.992 18.176 36.288 40.96 36.928l137.216-0.256 5.248 0.96 4.608-0.64 522.24 0.192c18.368-1.28 36.096-6.976 51.456-16.768 16.64-10.688 30.08-25.728 36.16-38.976l6.4-10.624c35.968-85.632 79.872-347.968 81.664-359.04l0.704-10.624C956.928 477.056 951.36 454.208 939.072 434.496zM132.864 483.328 218.24 483.2l0 389.312-85.696 0.256L132.864 483.328zM815.744 841.6l-4.032 6.4c-3.648 7.36-9.216 13.568-16 17.92-6.208 3.968-13.568 6.336-19.136 6.72L282.24 872.448 282.24 479.808C366.656 463.36 498.24 334.336 501.824 201.344L501.44 194.816c0-24.192 19.648-43.904 43.84-43.904 20.544 0 38.08 13.952 42.688 33.984l3.584 15.232c3.136 18.368 4.672 36.736 4.672 54.656 0 36.352-6.08 72.256-18.112 106.624L548.672 445.824l291.456 0.064 6.912 0.704c15.488 0.576 29.568 8.704 37.696 21.76 5.056 8.128 7.36 17.6 6.592 32.384C890.88 503.296 846.848 766.656 815.744 841.6z" p-id="94498"></path></svg>{{item.likes}}</span>
                        <span @click="btnCancel(index)" v-show="!item.actionId"><svg t="1640414114297" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="105075" width="16" height="12"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="105076" fill="#d81e06"></path></svg>{{item.likes}}</span>
                    </div>
                </li>
            </ul>
        </div>
        </van-popup> 


        <!-- 目录 -->
        <!-- <van-popup v-model="show" position="bottom" :style="{ height: '100%', width:'100%'}"  >
            <div class="all-list-header"><div class="header-content">{{bookdetail.title}}</div></div>
            <div class="nav-list"><div class="txt">目录</div></div>
            <div class="list-length">
                <div class="list-left">共{{cataloguelist.length}}章</div>
                
                <div class="list-right" @click="getInverted">倒序</div>
            </div>
            <ul class="all-list">
                <li v-for="(item,index) in cataloguelist" :key="index" @click="btnList(item.secId)">{{item.title}}</li>
            </ul>
        </van-popup> -->

        <!-- 月票 -->
        <van-popup v-model="monthlyticket" round position="bottom" :style="{ height: '20%' }" >
            <div class="popup-header">月票</div>
            <div class="popup">
                <div class="popup-num">月票{{mount}}张</div>
                <div class="popup-send" @click="sendMount">投月票{{mount}}张</div>
            </div>
        </van-popup>

        <!-- 推荐票 -->
        <van-popup v-model="recommend" round position="bottom" :style="{ height: '20%' }" >
            <div class="popup-header">推荐票</div>
            <div class="popup">
                <div class="popup-num">推荐票{{recommen}}张</div>
                <div class="popup-send" @click="sendRecommen">投推荐票{{recommen}}张</div>
            </div>
        </van-popup>

        <!-- 礼物 -->
        <van-popup v-model="gift" round position="bottom" :style="{ height: '50%' }" >
            <div class="popup-gift-header">礼物</div>
            <div class="popup-gift">
                <ul>
                    <li @click="btnSelect({price:99,name:'鲜花'})">
                        <img src="https://qidian.qpic.cn/qidian_common/349573/9df3c1a93c6b423ae5573a4b6e45664e/0" class="gifts-image">
                        <div class="popup-txt">
                            <span>99红袖币</span>
                            <p>鲜花</p>
                        </div>
                    </li>
                    <li @click="btnSelect({price:520,name:'咖啡'})">
                        <img src="https://qidian.qpic.cn/qidian_common/349573/2003ab133d2a35d5d394994bec1ad707/0" class="gifts-image">
                        <div class="popup-txt">
                            <span>520红袖币</span>
                            <p>咖啡</p>
                        </div>
                    </li>
                    <li @click="btnSelect({price:1314,name:'钻石'})">
                        <img src="https://qidian.qpic.cn/qidian_common/349573/8c5865dab244c4c42ca393bdf576a6ed/0" class="gifts-image">
                        <div class="popup-txt">
                            <span>1314红袖币</span>
                            <p>钻石</p>
                        </div>
                    </li>
                    <li @click="btnSelect({price:6666,name:'豪车'})">
                        <img src="https://qidian.qpic.cn/qidian_common/349573/6b06e90001868153c42fc3dd5cd416ad/0" class="gifts-image">
                        <div class="popup-txt">
                            <span>6666红袖币</span>
                            <p>豪车</p>
                        </div>
                    </li>
                    <li @click="btnSelect({price:10000,name:'房子'})">
                        <img src="https://qidian.qpic.cn/qidian_common/349573/669f17716cc9c829e3c8c7187f2d9095/0" class="gifts-image">
                        <div class="popup-txt">
                            <span>10000红袖币</span>
                            <p>房子</p>
                        </div>
                    </li>
                    <li @click="btnSelect({price:250,name:'刀片'})">
                        <img src="https://qidian.qpic.cn/qidian_common/349573/715cb0be2da3c7eed7a92472f5bf7e62/0" class="gifts-image">
                        <div class="popup-txt">
                            <span>250红袖币</span>
                            <p>刀片</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="popup-gift-send">
                <div class="gift-left">余额{{coin}}红袖币</div>
                <div class="gift-right" @click="btnSendGift">赠送{{giftname}}</div>
            </div>
        </van-popup>

        <!-- 粉丝 -->
        <van-popup v-model="fans" round position="bottom" :style="{ height: '30%' }" >
            <div class="popup-fans-header">迷妹榜</div>
            <ul class="popup-list">
                <li v-for="(item,index) in fanslist" :key="index">
                    <div class="li-left">
                        <div class="num">{{index+1}}</div>
                        <img :src="item.imageUrl" alt="">
                        <div class="li-txt">
                            <span>{{item.nickName}}</span>
                            <p>{{item.fansTitle}}</p>
                        </div>
                    </div>
                    <div class="li-right">{{item.scoreValue}}</div>
                </li>
            </ul>
        </van-popup>






        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import {getBookDetail,getCatalogue,getBookComment,getBookReply,getBookFans} from "../../api/bookdetail"
export default {
    props:['bookids','coin','mount','recommen','likebooklist'],
    data(){
        return {
            monthlyticket:false,
            recommend:false,
            gift:false,
            fans:false,
            show: false,
            bookdetail:null,
            cataloguelist:null,
            lastcontent:null,
            firstcontent:null,
            commentword:null,
            bookcomment:null,
            showcomment:false,
            showreply:false,
            replylist:null,
            fanslist:null,
            add:true,
            price:null,
            giftname:null,
        }
    },
    methods:{
        //目录倒序
        getInverted(){
            this.cataloguelist=this.cataloguelist.reverse();
        },

        //赠送月票
        sendMount(){
            if(this.mount==0){
                Toast('月票不足,投票失败')
            }else{
                this.bookdetail["pris:book"].totalArticleCount[0]=parseInt(this.bookdetail["pris:book"].totalArticleCount[0])+parseInt(this.mount)
                this.$emit('get-mount',0)
                Toast('赠送成功')
            }
            
        },
        //赠送推荐票
        sendRecommen(){
            if(this.recommen==0){
                Toast('推荐票不足,投票失败')
            }else{
                this.bookdetail["pris:book"].wprice=parseInt(this.bookdetail["pris:book"].wprice)+parseInt(this.recommen)
                this.$emit('get-recommen',0)
                Toast('赠送成功')
            }
            
        },


        //选择礼物
        btnSelect(val){
            this.price=val.price
            this.giftname=val.name
        },

        //赠送礼物
        btnSendGift(){
            if(this.giftname){
                if(this.coin-this.price>0){
                    this.$emit('get-sum',this.price)
                    Toast('赠送成功')
                    this.gift=false
                }else{
                    Toast('余额不足,赠送失败')
                }
            }else{
                Toast('您还未选择赠送礼物')
            }
            
            
        },

        //添加到书架
        getBookShelf(){
            this.add=false
            this.$emit('get-bookshelf',this.bookids)
        },
        //月票
        btnMonth(){
            this.monthlyticket=true
        },
        //推荐票
        btnRecommend(){
            this.recommend=true
        },
        //礼物
        btnGift(){
            this.gift=true
        },
        //粉丝
        btnFans(){
            this.fans=true
            getBookFans({
                id:this.bookids
            }).then(data=>{
                this.fanslist=data.list
                // console.log('书籍粉丝',data)
            })
        },





        //获取评论回复
        btnReply(id){
            this.showreply=true
            getBookReply({
                bookId:this.bookids,
                cid:id
            }).then(data=>{
                this.replylist=data.all.list
                // console.log('评论回复',data)
            })
        },

        //回复评论里面的点赞
        btnReplyLikes(id){
            this.replylist[id].actionId=false
            this.replylist[id].likes+=1
        },
        btnReplyCancel(id){
            this.replylist[id].actionId=true
            this.replylist[id].likes-=1
        },


        //评论点赞和取消
        btnLikes(id){
            this.bookcomment[id].actionId=false
            this.bookcomment[id].likes+=1
        },
        btnCancel(id){
            this.bookcomment[id].actionId=true
            this.bookcomment[id].likes-=1
        },
        btnSend(){
            if(!this.commentword){
                Toast('评论不能为空')
            }else{
                this.bookcomment.unshift({
                    avatar:'https://img1.baidu.com/it/u=3293231005,2758635617&fm=26&fmt=auto',
                    nickName:'hello word',
                    grade:5,
                    comment:this.commentword,
                    likes:0,
                    replyCount:0,
                    actionId:true
                })
                this.commentword=null
                // this.showcomment=false
            }
            // this.bookcomment=this.bookcomment.concat(this.commentlist)

        },
        btnShow(){
            this.showcomment=true
        },
        btnList(id){
            this.show=false
            this.$router.push({name:'bookcontent',params:{id:this.bookids,uid:id}})
        },
        //阅读书籍
        read(){
            this.$router.push({name:'bookcontent',params:{id:this.bookids,uid:this.firstcontent}})
        },
        showPopup() {
            this.show = true;
        },
        goBack(){
            this.$router.go(-1)
        }
    },
    created(){
        //显示已在书架
        if(this.likebooklist.indexOf(this.bookids)!=-1){
            this.add=false
        }


        //获取书籍评论
        getBookComment({
            bookId:this.bookids
        }).then(data=>{
            // console.log('书籍评论',data)
            // this.bookcomment.push.apply(this.bookcomment,data.all.list);
            this.bookcomment=data.all.list
            // this.bookcomment=this.bookcomment.concat(this.commentlist)
        })

        // console.log('传过来的id',this.bookids)
        getBookDetail({
            id:this.bookids
        }).then(data=>{
            this.bookdetail=data.feed.entry
            // console.log('书籍详情',data.feed.entry)
        })
        getCatalogue({
            source_uuid:this.bookids
        }).then(data=>{
            this.cataloguelist=data.data.catalog
            this.firstcontent=this.cataloguelist[0].uuid
            this.lastcontent=this.cataloguelist[this.cataloguelist.length-1].title
            // console.log('书籍目录',data)
        })
    },
}
</script>

<style lang="less" scoped>
.detail-load{
    width: 375px;
    height: 667px;
    display: flex;
    justify-content: center;
    align-items: center;
    .load-content{
        width: 50px;
        height: 50px;
    }
}

.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}

.book-detail{
    width: 340px;
    height: 160px;
    padding: 1rem;
    // position: relative;
    overflow: hidden;
    display: flex;
    .book-cover {
        width: 6rem;
        height: 8rem;
        border-radius: 2px;
        box-shadow: none;
        margin-right: .5rem;
    }   
    .book-cell {
        line-height: 1.4rem;
        overflow: hidden;
        .book-title {
            line-height: 1.4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 1.375rem;
            overflow: auto;
            white-space: normal;
        }
        .book-rand-a {
            font-size: 0.8125rem;
        }
        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            word-break: break-all;
        }
        .book-meta {
            font-size: .75rem;
            overflow: hidden;
            span {
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
}

.btn-change{
    width: 343px;
    height: 32px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .btn-change-first{
        width: 180px;
        height: 32px;
        display: flex;
        justify-content: space-between;
        .btn-button{
            width: 84px;
            height: 32px;
            color: #F01742;
            border-radius: 32px;
            border: 1px solid #F01742;
            font-size: 0.8125rem;
            text-align: center;
            line-height: 32px;
        }
    }
    .btn-change-last{
        width: 164px;
        height: 32px;
        display: flex;
        flex-direction: row-reverse;
        .btn-down{
            width: 152px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            border-radius: 32px;
            font-size: 0.8125rem;
            color: white;
            background-color: #F01742;
        }
    }
}

.book-detail-content{
    width: 343px;
    margin: 20px auto;
    padding-top: 10px;
    font-size: 0.875rem;
    border-top: 1px solid #eee;
}

//目录

.catalogue{
    width: 343px;
    height: 45px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .book-meta-left{
        height: 45px;
        line-height: 45px;
        font-size: 1rem;
        font-weight: bold;
    }
    .book-meta-right{
        height: 45px;
        line-height: 45px;
        color: #808080;
        font-size: .75rem;
    }
}

//月票
.mount-track{
    width: 100%;
    height: 83px;
    display: flex;
    justify-content: space-between;
    .track-content{
        width: 93px;
        height: 83px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        p{
            font-size: .75rem;
        }
        .txt{
            font-size: 10px;
            color: #808080;
        }
    }
}

//书评
.book-comment{
    width: 343px;
    height: 44px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    .left{
        height: 44px;
        line-height: 44px;
        font-size: 1.17em;
        font-weight: bold;
    }
    .right{
        height: 44px;
        line-height: 44px;
        color: #F01742;
        font-size: 0.75rem;
    }
}

//书评内容
.book-comment-content{
    width: 343px;
    margin: auto;
    ul{
        width: 100%;
        li{
            width: 100%;
            margin-top: 10px;
            .author{
                width: 100%;
                height: 45px;
                display: flex;
                align-items: center;
                img{
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }
                .author-txt{
                    margin-left: 10px;
                    height: 35px;
                    span{
                        font-size: 14px;
                    }
                    p{
                        font-size: 10px;
                    }
                }
            }
            .li-content{
                margin-top: 10px;
                font-size: 12px;
            }
            .li-foot{
                width: 100%;
                height: 35px;
                border-bottom: 1px solid rgb(219, 216, 216);
                display: flex;
                flex-direction: row-reverse;
                span{
                    line-height: 35px;
                    margin-right: 10px;
                    font-size: 12px;
                }
            }
        }
    }
}

//书评回复
.book-comment-reply{
    width: 343px;
    margin: auto;
    ul{
        width: 100%;
        li{
            width: 100%;
            margin-top: 10px;
            .author{
                width: 100%;
                height: 45px;
                display: flex;
                align-items: center;
                img{
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }
                .author-txt{
                    margin-left: 10px;
                    height: 35px;
                    span{
                        font-size: 14px;
                    }
                    p{
                        font-size: 10px;
                    }
                }
            }
            .li-content{
                margin-top: 10px;
                font-size: 12px;
            }
            .li-foot{
                width: 100%;
                height: 35px;
                border-bottom: 1px solid rgb(219, 216, 216);
                display: flex;
                flex-direction: row-reverse;
                span{
                    line-height: 35px;
                    margin-right: 10px;
                    font-size: 12px;
                }
            }
        }
    }
}






//完整目录


.all-list-header{
    // margin: auto;
    width: 343px;
    height: 55px;
    padding-left: 16px;
    background-color: red;
    display: flex;
    justify-content: center;
    .header-content{
        height: 55px;
        line-height: 55px;
        // padding-right: 50px;
        color: white;
    }
}
.nav-list{
    // margin: auto;
    width: 343px;
    height: 45px;
    padding-left: 16px;
    line-height: 45px;
    color: #F01742;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #F01742;
    .txt{
        height: 45px;
        // padding-right: 50px;
    }
}
.list-length{
    width: 343px;
    height: 44px;
    display: flex;
    padding-left: 16px;
    // margin: auto;
    justify-content: space-between;
    line-height: 44px;
    .list-left{
        padding-left: 16px;
    }
    .list-right{
        padding-right: 16px;
        font-size: 0.75rem;
    }
}


.all-list{
    width: 343px;
    padding-left: 16px;
    // margin: auto;
    li{
        width: 359px;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        padding-left: 16px;
    }
}



//月票内容
.popup-header{
    width: 100px;
    height: 30px;
    margin: auto;
    text-align: center;
    line-height: 30px;
}

.popup{
    width: 355px;
    height: 45px;
    margin: 29px auto;
    display: flex;
    justify-content: space-between;
    .popup-num{
        width: 100px;
        height: 45px;
        line-height: 45px;
    }
    .popup-send{
        width: 130px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        color: white;
        background-color: rgb(128, 128, 128);
    }
}



//礼物
.popup-gift-header{
    width: 100px;
    margin: auto;
    margin-bottom: 10px;
    text-align: center;
}

.popup-gift{
    width: 357px;
    height: 230px;
    margin: auto;
    ul{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 117px;
            height: 113px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid #E6E6E6;
            img{
                width: 92px;
                height: 52px;
            }
            .popup-txt{
                width: 117px;
                height: 41px;
                text-align: center;
                // line-height: 41px;
                span{
                    color: #DDCE8E;
                    font-size: 0.75rem;
                    font-weight: lighter;
                }
                p{
                    font-size: 0.75rem;
                    margin-top: 5px;
                }
            }
        }
    }
}

.popup-gift-send{
    margin: 14px auto;
    width: 355px;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .gift-right{
        width: 100px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        color: white;
        background-color: rgb(128, 128, 128);
    }
}


//迷妹榜
.popup-fans-header{
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin: auto;
    margin-bottom: 10px;
}
.popup-list{
    width: 355px;
    margin: auto;
    li{
        width: 355px;
        height: 72px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .li-left{
            height: 48px;
            display: flex;
            align-items: center;
            .num{
                width: 22px;
                height: 31px;
                text-align: center;
                line-height: 31px;
            }
            img{
                width: 48px;
                height: 48px;
                border-radius: 50%;
            }
            .li-txt{
                height: 40px;
                margin-left: 10px;
                p{
                    margin-top: 5px;
                    width: 46px;
                    height: 18px;
                    color: white;
                    background-color: rgb(221, 221, 87);
                    font-size: 10px;
                    border-top-right-radius: 9px;
                    border-bottom-right-radius: 9px;
                }
            }
        }
    }
}





</style>